<template>
  <div
    ref="mainRef"
    class="mainEcharts"></div>
</template>

<script lang="ts" setup>
import { init, type ECharts } from 'echarts'
import { onMounted, ref, onUnmounted } from 'vue'
import Debounce from '@/compoase/debounce'
const mainRef = ref()
const props = defineProps<{
  options: any;
}>()
let myChart: ECharts | null = null
// 初始化Echarts
const initEchart = () => {
  myChart === null && (myChart = init(mainRef.value))
  // const option = {
  //   color: ['#29F1FA', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
  //   grid: {
  //     top: '40px',
  //     bottom: '25px',
  //   },
  //   tooltip: {
  //     trigger: 'axis'
  //   },
  //   xAxis: {
  //     type: 'category',
  //     boundaryGap: false,
  //     axisLabel: {
  //       color: '#777'
  //     },
  //     splitLine: {
  //       lineStyle: {
  //         color: ['#777']
  //       }
  //     },
  //     data: props.options.xData//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //   },
  //   yAxis: {
  //     type: 'value',
  //     axisLabel: {
  //       color: '#777'
  //     },
  //     splitLine: {
  //       lineStyle: {
  //         color: ['#777']
  //       }
  //     },
  //     name: '单位：MW'
  //   },
  //   series: [
  //     {
  //       data: props.options.yData, //[820, 932, 901, 934, 1290, 1330, 1320],
  //       type: 'line',
  //       areaStyle: {
  //         opacity: 0.1
  //       }
  //     }
  //   ]
  // };
  myChart.setOption(props.options)
}
onMounted(() => {
  initEchart()
})
const debounce = new Debounce()
const resize = debounce.use(() => {
  myChart?.resize()
})
const listener = () => {
  resize()
}
window.addEventListener('resize', listener, { passive: false })
onUnmounted(() => {
  window.removeEventListener('resize', listener)
})
</script>

<style lang="scss" scoped>
.mainEcharts {
  height: 100%;
}
</style>
